<modal-resizable [title]="titleId" (close)="onClose()">
  <div class="top-container">
    <mat-card
      class="player-card"
      (click)="setRecActive()"
      [class.active]="rec.isActive"
    >
      <div class="player-card-data">
        <div>
          CurrentTime:
          {{ rec.player?.getCurrentTime() || 0 | number : "1.3-3" }}s
        </div>
        <div>Duration: {{ rec.player?.getDuration() || 0 }}</div>
        <div>PlaybackRate: {{ rec.player?.getPlaybackRate() || 0 }}</div>
      </div>
      <div
        [id]="rec.id"
        *ngIf="!rec.noData"
        style="cursor: ew-resize"
        (wheel)="onZoomAudio($event, rec.player)"
      ></div>
      <div *ngIf="rec.noData">
        <h2>Audio file is empty (size : 0b)</h2>
      </div>
      <div class="player-controls" *ngIf="!rec.noData">
        <!-- <button
          mat-mini-fab
          color="primary"
          (click)="seekAndCenter(rec.player, -0.05)"
          aria-label="rewind"
        >
          <mat-icon>fast_rewind</mat-icon>
        </button> -->
        <a [href]="rec.mp3" download="rec.mp3" style="float: right">
          <button mat-icon-button><mat-icon>download</mat-icon></button>
        </a>
        <button
          mat-icon-button
          color="primary"
          aria-label="play/stop"
          (click)="rec.player.playPause()"
        >
          <mat-icon *ngIf="!rec.player?.isPlaying()">play_arrow</mat-icon>
          <mat-icon *ngIf="rec.player?.isPlaying()">pause</mat-icon>
        </button>

        <!-- <button
          mat-mini-fab
          color="primary"
          (click)="seekAndCenter(rec.player, 0.05)"
          aria-label="forward"
        >
          <mat-icon>fast_forward</mat-icon>
        </button> -->
      </div>
    </mat-card>
  </div>

  <mat-card *ngIf="selectedColumns?.length">
    <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
      <mat-tab label="TableData">
        <app-custom-table
          [details]="selectedStreams"
          [columns]="columnDictionary"
          [isDictionary]="true"
          [isSelectedByClick]="true"
          [isPaginator]="false"
          style="min-height: 50vh"
          #dataGridTable
        ></app-custom-table>
      </mat-tab>
      <mat-tab label="Chart">
        <div
          style="
            height: 50vh;
            min-height: 500px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: stretch;
            align-content: stretch;
            flex-wrap: nowrap;
          "
        >
          <section style="display: flex; flex: 0">
            <mat-checkbox
            class="labels"
              *ngFor="let item of chartFilter"
              color="primary"
              [(ngModel)]="item.value"
              (click)="onFilterChart()"
            >
              <div style="display: flex; align-items: center; margin: 0.5rem;">
                <div
                  style="
                    display: inline-block;
                    width: 40px;
                    height: 10px;
                    margin: 4px;
                    border-radius: 50rem;
                    border: 1px solid;
                  "
                  [style.backgroundColor]="item.value ? item.color : 'transparent'"
                  [style.borderColor]="!item.value ? item.color : 'transparent'"
                ></div>
                {{ item.title }}
              </div>
            </mat-checkbox>
          </section>
          <mat-radio-group aria-label="Select an option" [(ngModel)]="typeOfChartRadio">
            <mat-radio-button color="primary" value="line">Line</mat-radio-button>
            <mat-radio-button color="primary" value="bar">Bar</mat-radio-button>
            <mat-radio-button color="primary" value="area">Area</mat-radio-button>
          </mat-radio-group>
          <flexible-chart
            style="flex: 1; background: rgb(217, 217, 217); height: 300px"
            [data]="rangeChartData"
            [typeOfChart]="typeOfChartRadio"
            [globalMinMax]="false"
            [fullToolTip]="true"
            [isRange]="true"
            [startXAxisNumber]="lastRange?.start || 0"
            [options]="{
              axisX: true,
              axisY: false
            }"
          ></flexible-chart>
          <flexible-chart
            style="flex: 0; background: rgb(172, 172, 172); height: 100px"
            [data]="chartData"
            [typeOfChart]="typeOfChartRadio"
            [isRange]="true"
            [globalMinMax]="false"
            (range)="onRange($event)"
            [options]="{
              axisX: false,
              axisY: false
            }"
          ></flexible-chart>
        </div>
      </mat-tab>
    </mat-tab-group>

    <!-- <cdk-virtual-scroll-viewport
      [itemSize]="18"
      style="height: 200px; width: 100%"
    > -->
    <!-- <div style="display: flex">
      <div *ngFor="let col of selectedColumns" style="flex: 1; height: 18px">
        <strong>{{ columnDictionary[col] }}</strong>
      </div>
    </div>
    <div *ngFor="let item of selectedStreams" style="display: flex">
      <div *ngFor="let col of selectedColumns" style="flex: 1; height: 18px">
        <span>{{ item[col] }}</span>
      </div>
    </div> -->
    <!-- </cdk-virtual-scroll-viewport> -->
  </mat-card>
</modal-resizable>
